<template>
  <a-drawer :visible="visible" placement="right" :title="title" width="600px" @close="onClose">
    <a-button type="primary" icon="plus" @click="addTable">新增</a-button>
    <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
      @change="handleTableChange" rowKey="id">
      <!-- 操作栏-->
      <span slot="action" slot-scope="text, record">
        <!-- 编辑模块 | 字段 -->
        <a @click="editTable(record)">编辑</a>
        <a-divider type="vertical" />
        <a-popconfirm title="确认删除?" ok-text="确认" cancel-text="取消" @confirm="delTable(record)">
          <a>删除</a>
        </a-popconfirm>
      </span>
    </a-table>
    <!-- 添加 | 编辑花名册 -->
    <a-modal v-model="isAdd" title="花名册名称" :confirmLoading="submitLoading" @ok="addFormSubmit">
      <a-space>
        名称:
        <a-input placeholder="请输入名称" v-model="name"/>
      </a-space>
    </a-modal>
  </a-drawer>
</template>

<script>
import { getStaffGroupPage,addGroup,editGroup,delGroup } from "@/api/human/relationStaff"
import {
  COLUMNS_GROUP
} from "./form"
export default {
  name: 'GroupList',
  data() {
    return {
      visible: false,
      isAdd: false,
      title: '花名册',
      type: "add",
      submitLoading: false,
      enterpriseId: '',
      groupId: "",
      name: "",

      table: {
        columns: COLUMNS_GROUP,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },
    }
  },
  beforeCreate() {

  },
  computed: {

  },
  methods: {
    async init(id) {
      this.visible = true;
      this.enterpriseId = id;
      this.loadTable(true);
    },
    // 获取花名册列表
    async loadTable(flag) {
      let params = {};
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.enterpriseId = this.enterpriseId
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getStaffGroupPage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    addTable() {
      this.isAdd = true;
      this.type = "add";
    },
    editTable(row) {
      this.isAdd = true;
      this.type = "edit";
      this.name = row.name;
      this.groupId = row.groupId;
    },
    async delTable(rows) {
      let params = {
        groupId: rows.groupId
      };
      const { code } = await delGroup(params);
      if (code === '1') {
        this.$message.success('操作成功');
        this.loadTable(true);
        this.$emit('on-ok');
      }
    },
    async addFormSubmit() {
      let params = {};
      if (this.enterpriseId) {
        params.enterpriseId = this.enterpriseId;
      }
      if (this.name == '') {
        this.$message.warning('请输入花名册名称')
      }
      params.name = this.name;
      params.groupId = this.groupId;
      this.submitLoading = true;
      const { code } = this.type == 'edit' ? await editGroup(params) : await addGroup(params);
      this.submitLoading = false;
      if (code === '1') {
        this.isAdd = false;
        this.$message.success('操作成功');
        this.loadTable(true);
      }
    },
    onClose() {
      this.visible = false;
      this.$emit('on-ok');
    }
  }
}
</script>

